/*
 * @Date: 2022-03-29 12:40:02
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 21:20:20
 * @FilePath: /payment/pay/src/pages/Tenant/TenantApply.jsx
 */
import React, { useState, useEffect } from 'react'

import { DatePicker, Descriptions, Form, Button, Row, Col, Input, Table, Modal, ConfigProvider } from 'antd';
import style from './recharge.module.css'
import { SearchOutlined, ExportOutlined } from '@ant-design/icons';
import zhCN from "antd/es/locale/zh_CN";

import Tab from '../../components/Tabs'
import Export from './Export';

import axios from '../../util/axios'
import qs from 'qs'
import { unstable_batchedUpdates } from 'react-dom';//批量更新状态时使用
const { RangePicker } = DatePicker;

export default function TenantApply() {
  //分页
  let [pag, setPag] = useState({ current: 1, pageSize: 5, pageSizeOptions: [5, 10, 20], showSizeChanger: true, showQuickJumper: true, onChange: changePage })
  //模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  //表格数据
  let [data, setData] = useState()
  //是否为全部的数据
  let [isAll,setIsAll]=useState(true)
  let [form1]=Form.useForm()
  useEffect(() => {
    
    if(isAll){
      axios({
        url: '/chongZhiShenQing',
        method: 'get',
        params: {
          limit: pag.pageSize.toString(),
          name:JSON.parse(localStorage.getItem('user')).uName,
          page: pag.current.toString()
        },
        // headers:{
        //   'Content-Type': 'application/json'
        // }
      }).then(res => {
        console.log(res);
        if (res.code === 200) {
          setData(res.data.map(item => ({ ...item, key: item.id })))
          setPag({ ...pag, total: res.count })
          setIsAll(true)
        }
      })
    }else{
      form1.submit()
    }
    
  }, [pag.current,isAll])


  const onFinish = (values) => {
    console.log('Success:', values);
    const rangeValue = values.time
    values = {
      ...values,
      time: [rangeValue[0].format('YYYY-MM-DD hh:mm:ss'), rangeValue[1].format('YYYY-MM-DD hh:mm:ss')]
    }
    axios({
      url: '/chongZhiShenQing',
      method: 'get',
      params: {
        limit: pag.pageSize.toString(),
        name: JSON.parse(localStorage.getItem('user')).uName,
        page: pag.current.toString(),
        start:values.time[0],
        end:values.time[1]
      },
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        unstable_batchedUpdates(()=>{
          setData(res.data.map(item => ({ ...item, key: item.id })))
          setPag({ ...pag, total: res.count })
          setIsAll(false)
        })
        
      }
    })
  };

  //页数更改时
  function changePage(page, pageSize) {
    setPag({ ...pag, current: page, pageSize })
  }

  //模态框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns = [
    {
      title: '流水号',
      dataIndex: 'liuShuiHao',
      key: 'liuShuiHao',
    },
    {
      title: '充值金额',
      dataIndex: 'money',
      key: 'money',
    },
    // {
    //   title: '转账卡号',
    //   dataIndex: 'cardId',
    //   key: 'cardId',
    // },
    // {
    //   title: '系统银行',
    //   dataIndex: 'bank',
    //   key: 'bank',
    // },
    // {
    //   title: '系统卡号',
    //   key: 'sysCardId',
    //   dataIndex: 'sysCardId',

    // },
    // {
    //   title: '系统收款人',
    //   dataIndex: 'sysRecUser',
    //   key: 'sysRecUser',
    // },
    {
      title: '充值时间',
      dataIndex: 'chongZhiTimec',
      key: 'chongZhiTimec',
    },
    {
      title: '状态',
      key: 'zhuangTai',
      dataIndex: 'zhuangTai',
      render: (text) => {
        return text === '商户已付款' ? <span style={{ color: "#55f" }} >商户已付款</span> :
          text === '审核成功' ? <span style={{ color: "#5c5" }} >审核成功</span> :
            text === '已拒绝' ? <span style={{ color: "#f50" }}>已拒绝</span> : ''
      }

    },
    // {
    //   title: '操作',
    //   key: 'action',
    //   render: (text, record) => {
    //     console.log(record);
    //     return <>
    //       <Button type="primary" size="small" onClick={()=>showModal()}>查看</Button>

    //       <Modal title="查看充值申请" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false} footer={null} width={600} >
    //         <Descriptions bordered size='small' className={style.modal}>
    //           <Descriptions.Item label="订单状态" span={5}>{record.zhuangTai}</Descriptions.Item>
    //           <Descriptions.Item label="转账金额">{record.money}</Descriptions.Item>
    //         </Descriptions>
    //       </Modal>
    //     </>
    //   },
    // },
  ];

  // const data = [
  //   {
  //     key: '1',
  //     num: 200,
  //     cardId: '31213435442',
  //     bank: '工商',
  //     sysCardId: '45647879654564654',
  //     sysRecUser:'张三',
  //     time:'2021-10-12 12:30',
  //     status:1
  //   },
  // ];
  return (
    <div>
      <Tab title="商户充值申请" />

      <Form
        name="basic"
        form={form1}
        onFinish={onFinish}
        autoComplete="off"
        layout='inline'
        className={style.content}
      >
        <Form.Item name='time'>
          <RangePicker locale={zhCN} showTime placeholder={['开始日期', '结束日期']} />
        </Form.Item>

        <Form.Item >
          <Button type="primary" htmlType="submit" onClick={() => {
              setPag({ ...pag, current: 1 })
          }} icon={<SearchOutlined />}>
            搜索
          </Button>
        </Form.Item>
        
        <Form.Item >
          <Export data={data} header={columns.slice(0, 7)} fileName='商户充值申请.xlsx' />
        </Form.Item>
        <Form.Item >
          <Button type="primary" onClick={()=>{
            setIsAll(true);
            setPag({...pag,current:1});
            }
            }>
            查看全部
          </Button>
        </Form.Item>
      </Form>
      <div className={style.content}>
        <ConfigProvider locale={zhCN}>

          <Table columns={columns} dataSource={data} pagination={pag} />
        </ConfigProvider>
      </div>



    </div>
  )
}
